<template>
    <div class="course">
        <div class="title">
            <img @click="go_back" class="fan_hui" src="../lmx/image/return.png" alt="">
            <span>视频教程</span>
        </div>
        <div class="screening_one">
            <div @click="gai_one(index)" class="kuai" v-for="iten,index in screening_one "
                :class="active_one!=index?'kuai':'kuai_one'">
                <span class="zi">{{iten}}</span>
            </div>
        </div>
        <div class="screening_two">
            <van-tabs @click-tab="gai_two" line-width="0px" line-height="0px" v-model:active="active" shrink
                title-active-color="red">
                <van-tab v-for="index in 8" :title="'选项 ' + index">
                </van-tab>
            </van-tabs>
        </div>
        <div class="screening_san">
            <div @click="gai_san(index)" class="kuai_san" v-for="iten,index in screening_san "
                :class="active_san!=index?'kuai_san':'hong_kuai'">
                <span class="zi">{{iten}}</span>
            </div>
        </div>
        <div ref="content" class="content">

            <div class="main">

                <div class="works" v-for="item,index in works_list">
                    <img class="tu" :src="item.url" alt="">
                    <span class="wen_zi">{{item.zi}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const content = ref()
const active = ref(0)
const active_one = ref(0)
const active_san = ref(0)
var screening_one = ['综合排序', '最新排序', '好评度', '收藏最多']
var screening_san = ['全部', '免费', '会员专享']
var works_list = [
    {
        url: new URL('../lmx/image/11.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/11.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/22.jpg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
    {
        url: new URL('../lmx/image/33.jpeg', import.meta.url).href,
        zi: '你匆匆哦按哦OA少女哦闹好威风'
    },
]
function go_back() {
    router.go(-1)
}
onMounted(() => {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    var vdaH = h - 40 + 'px'
    const boxSan = content.value
    boxSan.style.height = vdaH
})
function gai_one(i) {
    active_one.value = i
    console.log(screening_one[i])
}
function gai_two(name) {
    console.log(name.title)
    // console.log(name.event)
    // console.log(name.name)
}
function gai_san(i) {
    active_san.value = i
    console.log(screening_san[i])
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.course {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    width: 100%;
    height: 40px;
    /* background-color: blue; */
    position: relative;
    margin: 0 auto;
}

.fan_hui {
    width: 25px;
    height: 25px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 5px;
}

.title>span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10.4px;
    margin-left: -32px;
}

.screening_one,
.screening_san {
    width: 100%;
    height: 44px;
    /* background-color: red; */
    display: flex;
    /* margin-left: 8px; */

}

.screening_one>div,
.screening_san>div {
    /* width: 55.69px; */
    height: 44px;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.kuai_one,
.hong_kuai {
    color: red;
}

.screening_one>div>span,
.screening_san>div>span {
    margin-right: 10px;
    margin-left: 10px;
    font-size: 14px;
    /* line-height: 44px; */
}

.screening_two {
    width: 100%;
    /* height: 30px; */
    /* background-color: red; */
}

.content {
    width: 95%;
    /* flex: 1; */
    /* background-color: aqua; */
    overflow: scroll;
}

.main {
    width: 100%;
    /* height: 180%; */
    /* background-color: blueviolet; */
    display: flex;
    flex-wrap: wrap;

}

.works {
    width: 168px;
    /* height:100px; */
    /* background-color: brown; */
    margin: 5px;
    display: flex;
    flex-direction: column;
}

.tu {
    width: 100%;
    height: 90px;
    border-radius: 8px;
}

.wen_zi {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    word-break: break-all;
    -webkit-box-orient: vertical;
}
</style>

